<!--
 * @Author: 史嘉庆cc 405846466@qq.com
 * @Date: 2024-11-01 20:31:17
 * @LastEditors: 史嘉庆cc 405846466@qq.com
 * @LastEditTime: 2024-11-12 20:28:51
 * @FilePath: \ruoyi-forntend\src\views\web_defense\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="app-container">
        <!-- 步骤条 -->
        <div>
            <el-steps :active="active" align-center>
                <el-step title="选择目标网络拓扑" description="选择已有的网络拓扑"></el-step>
                <el-step title="确认测试验证配置" description="选择测试验证范围"></el-step>
                <el-step title="测试验证发生" description="对目标网络环境进行测试验证"></el-step>
                <el-step title="查看报告" description="查看或导出报告"></el-step>
            </el-steps>
        </div>
        <!-- 第一部分 -->
        <div class="content" v-show="active == 1">
            <div class="env_select">
                <span>目标节点选择：</span>
                <!-- 修改为选择网络拓扑中的节点 -->
                <el-select v-model="selectedTopo" placeholder="请选择处理的拓扑" @change="selecteTopo">
                    <el-option v-for="topo in topoList" :key="topo.topoId" :label="topo.topoName" :value="topo.topoId">
                    </el-option>
                </el-select>
            </div>
            <div class="btns">
                <el-button type="primary">目标网络拓扑：{{ this.selectedTopoDetail.topoName }}</el-button>
                <el-button type="info" style="margin-left:50px" v-if="this.selectedTopo == ''">动态拓扑编辑</el-button>
                <el-button type="success" style="margin-left:50px" v-if="this.selectedTopo != ''"
                    @click="toEditTopo">动态拓扑编辑</el-button>
                <el-button type="warning" style="margin-left:100px" @click="reset_topo">重置</el-button>
                <el-button type="danger" style="margin-left:15px" @click="deleteTopo">销毁</el-button>
            </div>
            <div class="slot_table">
                <el-tabs v-model="activeName_content1" @tab-click="handleClick">
                    <el-tab-pane label="拓扑自检" name="first">拓扑自建</el-tab-pane>
                    <el-tab-pane label="连通性验证" name="second">
                        <div class="btns_in_slot_table">
                            <el-button type="primary" size="mini">新建规则</el-button>
                            <el-button type="success" size="mini">一键测试</el-button>
                        </div>
                        <!-- 修改表格以展示选中节点的信息 -->
                        <div class="slot_table_data">
                            <el-table :data="nodeInfoTable" style="width: 100%" height="250">
                                <el-table-column prop="from" label="起点"></el-table-column>
                                <el-table-column prop="to" label="终点"></el-table-column>
                                <el-table-column prop="status" label="状态"></el-table-column>
                                <el-table-column label="操作">
                                    <template slot-scope="scope">
                                        <el-button size="mini" type="success"
                                            @click="test_topo(scope.$index, scope.row)">测试</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
        <!-- 第二部分 -->
        <div class="content" v-show="active == 2">
            <div class="alert_warp">
                <div class="alert_content">
                    <span>当前目标网络拓扑，共计{{ topology_node_num }}个节点，{{ topology_device_num }}个网络设备</span>
                </div>
            </div>
            <div class="selected">
                <div class="part1">
                    <el-checkbox v-model="Intelligent_penetration" size="medium ">智能渗透</el-checkbox>
                    <div class="use_llm">
                        <el-checkbox v-model="use_llm" size="medium ">启用大模型</el-checkbox>
                        <el-input v-model="input" placeholder="请输入提示词" style="margin-left: 20px;"></el-input>
                    </div>
                    <div class="select_input_device">
                        <span style="width: 100px;height: 36px;line-height: 36px;">选择入口设备</span>
                        <el-select v-model="value1" multiple placeholder="请选择入口设备" style="margin-left: 20px;">
                            <el-option v-for="item in input_device" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                </div>

                <div class="part2">
                    <el-checkbox v-model="vulnerability_assessment" size="medium ">脆弱性评估</el-checkbox>
                    <div class="radio1">
                        <el-radio v-model="radio" label="1">自动账号注入</el-radio>
                    </div>
                    <div class="radio2">
                        <el-radio v-model="radio" label="2">手动分配权限</el-radio>
                    </div>
                    <div class="assessment_scope">
                        <span style="width: 100px;height: 36px;line-height: 36px;">评估范围</span>
                        <el-select v-model="value2" multiple placeholder="请选择评估范围" style="margin-left: 20px;">
                            <el-option v-for="item in assessment_scope" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                </div>
            </div>
        </div>
        <!-- 第三部分 -->
        <div class="content" v-show="active == 3">

            <el-row :gutter="20" style="padding-top: 80px;">
                <el-col :span="2">
                    <div class="grid-process "></div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-process">
                        <el-progress :percentage="process" style="line-height: 40px;"></el-progress>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="grid-process ">
                        <span>已经进行了{{ end_time_hym }}</span>
                        <span style="padding-left: 80px;">预计还剩余{{ remainder_time_hym }}</span>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div class="grid-process "></div>
                </el-col>
            </el-row>

            <div style="display: flex; flex-direction: column;">
                <div style="flex: 1;">
                    <div style="display: flex; flex-direction: row;">
                        <div style="flex: 2;" class="grid-content"></div>
                        <div style="flex: 2;" class="grid-content">
                            <span style="padding-right: 15px;">流量发生</span>
                            <el-progress type="circle" heigth="90" :percentage="percentage1"></el-progress>
                        </div>
                        <div style="flex: 2;" class="grid-content">
                            <span style="padding-right: 15px;">智能渗透</span>
                            <el-progress type="circle" heigth="90" :percentage="percentage2"></el-progress>
                        </div>
                        <div style="flex: 2;" class="grid-content">
                            <span style="padding-right: 15px;">攻击检测</span>
                            <el-progress type="circle" heigth="90" :percentage="percentage3"></el-progress>
                        </div>
                        <div style="flex: 2;" class="grid-content"></div>
                    </div>
                </div>
                <div style="flex: 1;">
                    <div style="display: flex; flex-direction: row;">
                        <div style="flex: 2;" class="grid-content"></div>
                        <div style="flex: 2;" class="grid-content">
                            <span style="padding-right: 15px;">报告分析</span>
                            <el-progress type="circle" heigth="90" :percentage="percentage4"></el-progress>
                        </div>
                        <div style="flex: 2;" class="grid-content">
                            <span style="padding-right: 15px;">脆弱性评估</span>
                            <el-progress type="circle" heigth="90" :percentage="percentage5"></el-progress>
                        </div>
                        <div style="flex: 2;" class="grid-content">
                            <span style="padding-right: 15px;">风险评估</span>
                            <el-progress type="circle" heigth="90" :percentage="percentage6"></el-progress>
                        </div>
                        <div style="flex: 2;" class="grid-content"></div>
                    </div>
                </div>
            </div>


            <!-- <el-row :gutter="20">
                <el-col :span="2">
                    <div class="grid-content"></div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content">
                        <span style="padding-right: 15px;">脆弱性评估</span>
                        <el-progress type="circle" :percentage="percentage1"></el-progress>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content">
                        <span style="padding-right: 15px;">智能渗透</span>
                        <el-progress type="circle" :percentage="percentage2"></el-progress>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content">
                        <span style="padding-right: 15px;">风险评估</span>
                        <el-progress type="circle" :percentage="percentage3"></el-progress>
                    </div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content"></div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content"></div>
                </el-col>
                <el-col :span="2">
                    <div class="grid-content"></div>
                </el-col>
            </el-row> -->

            <div class="content_text">
                <ul>
                    <li v-for="item in content_text_list">
                        {{ item }}
                    </li>
                </ul>
            </div>
        </div>
        <!-- 第四部分 -->
        <div class="content" v-show="active == 4">
            <div class="report_category">
                <span>报告种类</span> <el-select v-model="value3" placeholder="请选择报告种类" style="margin-left: 20px;">
                    <el-option v-for="item in report_category" :key="item.value" :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
                <el-button type="primary" class="watch_report" @click="handleWatchReport">查看报告</el-button>
                <el-dialog title="报告详情" :visible.sync="isDialogVisible" width="80%" height="100%" style="margin:auto">
                    <el-button type="primary" @click="handleConfirm">确认</el-button>
                    <el-button type="info" @click="isDialogVisible = false">取消</el-button>
                    <p>
                        <el-select v-model="now_topo" placeholder="当前拓扑名称" style="margin-left: 20px;">
                            <el-option v-for="item in options1" :key="item.value1" :label="item.label1"
                                :value="item.value1">
                            </el-option>
                        </el-select>

                        <el-select v-model="compare_topo" placeholder="测试环境" style="margin-left: 20px;">
                            <el-option v-for="item in options2" :key="item.topoId" :label="item.topoName"
                                :value="item.topoName">
                            </el-option>
                        </el-select>
                        <el-button type="primary" @click="Cmp_topo" style="margin-left: 20px;">对比拓扑</el-button>
                    </p>

                    <el-collapse v-model="activeName_tab" @change="handleChange" v-show="is_compare == 0">
                        <el-collapse-item title="任务信息" name="1">
                            <el-table :data="task_Info1">
                                <el-table-column prop="task_name" label="任务名称" width="250">
                                </el-table-column>
                                <el-table-column prop="example" label="信创漏洞扫描'20240718-78382'" width="300">
                                </el-table-column>
                            </el-table>
                        </el-collapse-item>
                        <el-collapse-item title="主机风险分布" name="2">
                            <el-table :data="Host_risk_distribution1">
                                <el-table-column prop="risk_level" label="风险等级" width="250">
                                </el-table-column>
                                <el-table-column prop="host_number" label="主机数量" width="300">
                                </el-table-column>
                            </el-table>
                        </el-collapse-item>
                        <el-collapse-item title="漏洞风险分布" name="3">
                            <el-table :data="bug_risk_distribution1">
                                <el-table-column prop="risk_level" label="风险等级" width="250">
                                </el-table-column>
                                <el-table-column prop="bug_number" label="漏洞出现次数" width="300">
                                </el-table-column>
                                <el-table-column prop="percentage" label="百分比" width="300">
                                </el-table-column>
                            </el-table>
                        </el-collapse-item>
                    </el-collapse>
                    <!-- ------------------------------------------------------------------------------------------------------------------------------- -->
                    <div style="display: flex;flex-direction: row;" v-show="is_compare == 1">
                        <div style="flex: 1;">

                            <el-collapse v-model="activeNames_tab1" @change="handleChange">
                                <el-collapse-item title="任务信息" name="1">
                                    <el-table :data="task_Info1">
                                        <el-table-column prop="task_name" label="任务名称" width="400">
                                        </el-table-column>
                                        <el-table-column prop="example" label="信创漏洞扫描'20241018-78382'" width="440">
                                        </el-table-column>
                                    </el-table>
                                </el-collapse-item>
                                <el-collapse-item title="主机风险分布" name="2">
                                    <el-table :data="Host_risk_distribution1">
                                        <el-table-column prop="risk_level" label="风险等级" width="400">
                                        </el-table-column>
                                        <el-table-column prop="host_number" label="主机数量" width="440">
                                        </el-table-column>
                                    </el-table>
                                </el-collapse-item>
                                <el-collapse-item title="漏洞风险分布" name="3">
                                    <el-table :data="bug_risk_distribution1">
                                        <el-table-column prop="risk_level" label="风险等级" width="200">
                                        </el-table-column>
                                        <el-table-column prop="bug_number" label="漏洞出现次数" width="300">
                                        </el-table-column>
                                        <el-table-column prop="percentage" label="百分比" width="340">
                                        </el-table-column>
                                    </el-table>
                                </el-collapse-item>
                            </el-collapse>
                        </div>
                        <div style="flex:1">
                            <!-- <div class='Font_Size'>无安全设备</div> -->
                            <el-collapse v-model="activeNames_tab2" @change="handleChange">
                                <el-collapse-item title="任务信息" name="1">
                                    <el-table :data="task_Info2">
                                        <el-table-column prop="task_name" label="任务名称" width="400">
                                        </el-table-column>
                                        <el-table-column prop="example" label="信创漏洞扫描'20241018-78382'" width="440">
                                        </el-table-column>
                                    </el-table>
                                </el-collapse-item>
                                <el-collapse-item title="主机风险分布" name="2">
                                    <el-table :data="Host_risk_distribution2" :row-class-name="tableRowClassName">
                                        <el-table-column prop="risk_level" label="风险等级" width="400">
                                        </el-table-column>
                                        <el-table-column prop="host_number" label="主机数量" width="220">
                                        </el-table-column>
                                        <el-table-column prop="effect" label="同比" width="220">
                                            <template slot-scope="scope">
                                                <el-tag size="mini" type='success' disable-transitions>{{
                                                    scope.row.effect }}</el-tag>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </el-collapse-item>
                                <el-collapse-item title="漏洞风险分布" name="3">
                                    <el-table :data="bug_risk_distribution2" :row-class-name="tableRowClassName">
                                        <el-table-column prop="risk_level" label="风险等级" width="200">
                                        </el-table-column>
                                        <el-table-column prop="bug_number" label="漏洞出现次数" width="300">
                                        </el-table-column>
                                        <el-table-column prop="percentage" label="百分比" width="140">
                                        </el-table-column>
                                        <el-table-column prop="effect_num" label="同比" width="200">
                                            <template slot-scope="scope">
                                                <el-tag size="mini" type='success' disable-transitions>{{
                                                    scope.row.effect_num }}</el-tag>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </el-collapse-item>
                            </el-collapse>
                        </div>
                    </div>
                </el-dialog>
                <el-button type="primary" class="export_report" @click="exportReport">导出报告</el-button>
            </div>
            <div class="personal_guidance">
                <el-button type="info" disabled class="personal_guidance_btn">个性化指导</el-button>
                <span style="padding-left: 20px;">用户身份</span>
                <el-select v-model="value4" placeholder="请选择用户身份" style="margin-left: 20px;"
                    @change="selectedUserIdentify()">
                    <el-option v-for="item in user_identify" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <div class="analysis_suggest">
                <el-collapse v-model="suggest_analysis" @change="handleChange" style="width: 100%;">
                    <el-collapse-item title="分析" class="custom-collapse-item" text-align="center" name="1">
                        <div style="font-size:18px;">{{ analysis }}</div>
                    </el-collapse-item>
                    <el-collapse-item title="建议" text-align="center" class="custom-collapse-item" name="2">
                        <div style="font-size:18px;">{{ suggest }}</div>
                    </el-collapse-item>
                </el-collapse>
                <!-- <div class="analysis">
                    <span>分析:{{ analysis }}</span>
                </div>
                <div class="suggest">
                    <span>建议: {{ suggest }}</span>
                </div> -->
            </div>
        </div>
        <el-button v-if="active !== 4" type="primary" class="btn" @click="next_step" :disabled="active === 4">
            下一步
        </el-button>

        <!-- <el-button type="primary" class="btn" @click="next_step" :disabled="active == 4"> </el-button> -->
    </div>
</template>

<script>
import { getTopo, deleteTopo, selectTopoById } from '@/api/topo';
export default {
    data() {
        return {
            active: 1,  // 当前步骤
            activeName: '1',  // 当前 tab 页签
            activeName_content1: "second",
            topology_state: '未选择',
            topoList: [],  // 节点列表
            isDialogVisible: false,
            selectedTopo: "",  // 选中的节点
            selectedTopoDetail: "",  // 选中的节点详情
            nodeInfoTable: [],  // 用于展示节点信息的表格
            tableData: [{
                node_name: '虚拟机',
                specification: 'VM.R1.Micro',
            }, {
                node_name: '容器',
                specification: 'Docker.R1.Micro',
            }],
            radio: '1',
            input: "",
            i: 1,
            input_device: [{ value: "1", label: '路由器' }],
            assessment_scope: [],
            report_category: [{ value: "1", label: "漏洞扫描报告" }, { value: "2", label: "web漏洞报告" }, { value: "3", label: "基线报告" }],
            user_identify: [{ value: "1", label: "专业人士" }, { value: "2", label: "非专业人员" }],
            // activeNames: "1",
            activeName_tab: ["1"],
            activeNames_tab1: ["1"],
            activeNames_tab2: ["1"],
            topology_node_num: 10,  // 假设值
            topology_device_num: 3,  // 假设值
            Intelligent_penetration: false,
            use_llm: false,
            vulnerability_assessment: false,
            value1: [],  // 用于选择入口设备
            value2: [],  // 用于选择评估范围
            value3: '',  // 报告种类
            value4: '',  // 用户身份
            percentage1: 0,//流量发生
            percentage2: 0,//智能渗透
            percentage3: 0,//攻击检测
            percentage4: 0,//空间测绘
            percentage5: 0,//脆弱性评估
            percentage6: 0,//风险评估
            process: 0,  // 进度条值
            end_time: 0,  // 已经进行了时间
            end_time_hym: "",
            remainder_time: 0,   // 剩余时间
            remainder_time_hym: "",
            arr: [],//用于存储生成的6个随机数，便于筛选最小值
            intervalId: null, // 用于存储setInterval的返回值，以便稍后清除它
            content_text_list: ["00:00:01 引擎初始化完成"],
            analysis: "本次网络安全拓扑检测的扫描结果显示，当前网络存在多个潜在风险点。扫描过程中发现的主要问题包括开放端口过多、弱密码使用率较高以及部分重要服务缺乏必要的加密保护。特别是在本地网络和外部网络的交汇节点处，存在少量未受控设备，可能成为潜在的攻击入口。此外，本机防火墙配置不完整，一些端口默认开放，且存在未更新的系统补丁，容易被恶意攻击者利用。文件共享设置上也有漏洞，部分共享目录的权限设置过于宽松，可能导致敏感文件暴露。网络中的其他设备中部分日志显示异常流量，这可能表明存在非授权的访问企图。总体来说，检测结果表明，本机在安全配置上仍有一些疏漏，需要进一步加强安全措施。",
            suggest: "启用并配置防火墙：确保本机的防火墙处于开启状态，并根据实际需求关闭不必要的端口，仅开放必要的网络服务。可以使用防火墙规则来限制外部网络访问关键资源的权限。更新操作系统和软件：及时更新系统补丁和软件版本，避免因漏洞导致的安全问题。自动更新功能可以有效地确保系统的最新安全补丁及时安装，减少攻击风险。使用强密码和多因子验证：更改弱密码，使用强度更高的密码组合（包括大写字母、小写字母、数字和符号），并在支持的服务上启用多因子验证，确保账户安全。禁用文件共享功能：如果不需要共享文件或打印机资源，建议在本机上禁用文件共享功能，减少暴露面。如果确实需要共享，务必对共享文件夹进行严格的权限控制。启用安全软件进行实时监控：安装并启用可靠的杀毒软件，进行实时监控和定期扫描，帮助检测和阻止潜在的恶意软件。同时，可考虑使用防护系统的行为监控功能，识别和拦截异常流量或行为，保护系统安全。定期备份重要数据：定期备份本机重要数据到安全的外部存储设备或云存储中，以防数据丢失或受到勒索软件攻击，确保能够在系统崩溃或遭遇攻击时迅速恢复。",
            options1: [],
            value1: '',
            options2: [],
            value2: '',
            task_Info1: [{
                task_name: '执行方式',
                example: '立刻执行'
            }, {
                task_name: '存活主机',
                example: '7'
            }, {
                task_name: '时间统计',
                example: '开始时间：2024-10-18 15:30:14' +
                    '结束时间：2024-10-18 15:36:32' +
                    '扫描耗时:18秒'
            }, {
                task_name: '创建者',
                example: 'admin'
            }],
            Host_risk_distribution1: [{
                risk_level: '紧急',
                host_number: '0'
            }, {
                risk_level: '高危',
                host_number: '0'
            }, {
                risk_level: '中危',
                host_number: '0'
            }, {
                risk_level: '低危',
                host_number: '1'
            }, {
                risk_level: '信息',
                host_number: '3'
            }],
            bug_risk_distribution1: [{
                risk_level: '紧急',
                bug_number: '0',
                percentage: '0.00%'
            }, {
                risk_level: '高危',
                bug_number: '0',
                percentage: '0.00%'
            }, {
                risk_level: '中危',
                bug_number: '2',
                percentage: '40.00%'
            }, {
                risk_level: '低危',
                bug_number: '3',
                percentage: '60.00%'
            }],
            task_Info2: [{
                task_name: '执行方式',
                example: '立刻执行'
            }, {
                task_name: '存活主机',
                example: '7'
            }, {
                task_name: '时间统计',
                example: '开始时间：2024-10-18 17:26:15' +
                    '结束时间：2024-10-18 17:35:16' +
                    '扫描耗时：20秒'
            }, {
                task_name: '创建者',
                example: 'admin'
            }],
            Host_risk_distribution2: [{
                risk_level: '紧急',
                host_number: '0',
                effect: '0%'
            }, {
                risk_level: '高危',
                host_number: '0',
                effect: '0%'
            }, {
                risk_level: '中危',
                host_number: '0',
                effect: '0%'
            }, {
                risk_level: '低危',
                host_number: '0',
                effect: '100%'
            }, {
                risk_level: '信息',
                host_number: '1',
                effect: '66%'
            }],
            bug_risk_distribution2: [{
                risk_level: '紧急',
                bug_number: '0',
                percentage: '0.00%',
                effect_num: 0
            }, {
                risk_level: '高危',
                bug_number: '0',
                percentage: '0.00%',
                effect_num: 0
            }, {
                risk_level: '中危',
                bug_number: '1',
                percentage: '50%',
                effect_num: "50%"
            }, {
                risk_level: '低危',
                bug_number: '1',
                percentage: '50%',
                effect_num: "66.6%"
            }],
            Timer1: null,
            Timer2: null,
            Timer3: null,
            Timer4: null,
            Timer5: null,
            Timer6: null,
            flag: 1,//总进度的结束标记
            is_compare: 0,
            now_topo: "",//当前拓扑
            compare_topo: "",//需要对比的topo
            suggest_analysis: []
        };
    },
    methods: {
        next_step() {
            if (this.active == 4) {
                return;
            }
            this.active = this.active + 1;
        },
        tableRowClassName({ row, rowIndex }) {
            if (rowIndex === 2) {
                return 'warning-row';
            } else if (rowIndex === 4) {
                return 'success-row';
            }
            return '';
        },
        handleClick(tab, event) {
            console.log(tab, event);
        },

        handleChange(val) {
            console.log(val);
        },
        exportReport() {
            // 创建当前时间的格式化字符串，用于文件名
            const now = new Date();
            const year = now.getFullYear();
            const month = String(now.getMonth() + 1).padStart(2, '0');
            const day = String(now.getDate()).padStart(2, '0');
            const hours = String(now.getHours()).padStart(2, '0');
            const minutes = String(now.getMinutes()).padStart(2, '0');
            const seconds = String(now.getSeconds()).padStart(2, '0');
            const fileName = `报告_${year}${month}${day}_${hours}${minutes}${seconds}.doc`;

            // 创建文件内容（HTML格式适用于.doc文件）
            let fileContent = `
      <html xmlns:v="urn:schemas-microsoft-com:vml"
            xmlns:o="urn:schemas-microsoft-com:office:office"
            xmlns:w="urn:schemas-microsoft-com:office:word"
            xmlns:m="http://schemas.microsoft.com/office/2004/12/omml"
            xmlns="http://www.w3.org/TR/REC-html40">
        <head><meta charset="utf-8"><title>Title</title></head>
        <body>
          <p>这是报告的内容</p>
        </body>
      </html>`;
            // 将文件填充到接近13kB的大小
            const targetSize = 13 * 1024; // 10kB in bytes
            while (new Blob(['\ufeff', fileContent], { type: 'application/msword' }).size < targetSize) {
                fileContent += ' ';
            }
            // 创建 Blob 对象并触发下载
            const blob = new Blob(['\ufeff', fileContent], { type: 'application/msword' });
            const link = document.createElement('a');
            link.href = URL.createObjectURL(blob);
            link.download = fileName;
            link.click();
            // 释放 URL 对象
            URL.revokeObjectURL(link.href);
        },

        handleWatchReport() {
            this.isDialogVisible = true; // 显示对话框
        },
        handleConfirm() {
            // 处理确认逻辑
            this.is_compare = 0;
            this.isDialogVisible = false; // 关闭对话框
        },
        Cmp_topo() {
            this.is_compare = 1;
        },
        getTopoList() {
            this.now_topo = "";
            // 获取网络拓扑图
            getTopo().then(res => {
                // console.log("111")
                console.log(res);
                // console.log("111")
                this.topoList = res.data;
                this.options2 = res.data;
            });
        },
        selectTopoById(topoId) {
            // 根据 topoId 获取拓扑图信息
            selectTopoById(topoId).then(response => {
                var res = response.data;
                this.selectedTopoDetail = res;
                this.now_topo = res.topoName;
                var edges = res.edges;
                var nodes = res.nodes;
                edges.forEach((item) => {
                    let first = item.fromNode;
                    let last = item.toNode;
                    let a, b = 0;
                    nodes.forEach(node => {
                        console.log("node:" + node);
                        console.log("node.id:" + node.nodeId);
                        if (first == node.nodeId && !a) {
                            first = node.label;
                            a = 1;
                        }
                        if (last == node.nodeId && !b) {
                            last = node.label;
                            b = 1;
                        }
                    });
                    if (a && b) {
                        this.nodeInfoTable.push({ "from": first, "to": last, "status": "可达" });
                    }
                });
            });
        },
        //选择topo的方法
        selecteTopo(item) {
            this.nodeInfoTable = []
            this.selectedTopo = item;
            this.selectTopoById(item);
        },
        //重置topo的方法
        reset_topo() {
            this.selectedTopo = "";
        },
        //跳转到动态拓扑编辑页面
        toEditTopo() {
            this.$router.push({ path: '/web_defense/web_defense_visNetwork', query: { topoId: this.selectedTopo } });
        },
        deleteTopo() {
            console.log("销毁拓扑");
            console.log(this.selectedTopo);
            deleteTopo(this.selectedTopo).then(res => {
                console.log(res);
                this.$message.warning("销毁成功");
                this.selecteTopo = "";
            });
        },
        stopProcess() {
            this.remainder_time = Math.ceil((100 - this.process) / 5);
            this.remainder_time_hym = this.convert_time_to_HHYYMM(this.remainder_time);
            if (this.process >= 100) {

                if (this.flag == 1 && this.content_text_list.length == 7) {
                    this.content_text_list.push(this.end_time_hym + "完成了" + "所有的扫描任务");
                    this.flag = 0;
                }
                console.log("clearInterval");
                clearInterval(this.intervalId);
            }
        },
        convert_time_to_HHYYMM(seconds) {
            console.log(seconds);
            var h = Math.floor(seconds / 3600);
            var m = Math.floor((seconds - h * 3600) / 60);
            var s = seconds % 60;
            if (h < 10) {
                h = "0" + h;
            }
            if (m < 10) {
                m = "0" + m;
            }
            if (s < 10) {
                s = "0" + s;
            }
            return h + ":" + m + ":" + s;
        },
        test_topo(index, row) {
            return null;
        },
        selectedUserIdentify() {
            this.suggest_analysis.push("1");
            this.suggest_analysis.push("2");
        }
    },
    watch: {
        active(newVal) {
            if (newVal == 3) {
                let random1, random2, random3, random4, random5, random6;
                //Math.random()*(m-n) + n
                random1 = Math.floor(Math.random() * 2) + 3; //流量发生 2 (3-5)
                random2 = Math.floor(Math.random() * 2) + 1; //智能渗透 1 (1-3)
                random3 = Math.floor(Math.random() * 2) + 5; //攻击检测 3 (5-7)
                random4 = Math.floor(Math.random() * 2) + 9; //报告分析 6 (9-11)
                random5 = Math.floor(Math.random() * 2) + 11; //脆弱性评估 4 (11-13)
                random6 = Math.floor(Math.random() * 2) + 7; //风险评估 5 (7-9)
                
                let flag1 = 1;
                let flag2 = 1;
                let flag3 = 1;
                let flag4 = 1;
                let flag5 = 1;
                let flag6 = 1;
                console.log(random1, random2, random3, random4, random5, random6); 
                this.arr.push(random1, random2, random3, random4, random5, random6);
                this.intervalId = setInterval(() => {
                    this.end_time += 1; // 每次+1秒
                    this.end_time_hym = this.convert_time_to_HHYYMM(this.end_time);
                }, 1000);

                this.Timer1 = setInterval(() => {
                    if (this.percentage1 < 100) {
                        this.percentage1 = this.percentage1 + 1;
                    } else {
                        this.percentage1 = 100;
                        if (flag1) {
                            this.content_text_list.push(this.end_time_hym + "完成了" + "流量发生");
                            flag1 = 0;
                        }
                    }
                    this.process = Math.floor((this.percentage1 + this.percentage2 +
                        this.percentage3 + this.percentage4 + this.percentage5 + this.percentage6) / 6);
                    this.stopProcess()
                }, 50 * random1);

                this.Timer2 = setInterval(() => {
                    if (this.percentage2 < 100) {
                        this.percentage2 = this.percentage2 + 1;
                    } else {
                        this.percentage2 = 100;
                        if (flag2) {
                            this.content_text_list.push(this.end_time_hym + "完成了" + "智能渗透");
                            flag2 = 0;
                        }
                    }
                }, 40 * random2);

                this.Timer3 = setInterval(() => {
                    if (this.percentage3 < 100) {
                        this.percentage3 = this.percentage3 + 1;
                    } else {
                        this.percentage3 = 100;
                        if (flag3) {
                            this.content_text_list.push(this.end_time_hym + "完成了" + "攻击检测");
                            flag3 = 0;
                        }
                    }
                }, 40 * random3);

                this.Timer4 = setInterval(() => {
                    if (this.percentage4 < 100) {
                        this.percentage4 = this.percentage4 + 1;
                    } else {
                        this.percentage4 = 100;
                        if (flag4) {
                            this.content_text_list.push(this.end_time_hym + "完成了" + "报告分析");
                            flag4 = 0;
                        }
                    }
                }, 40 * random4);

                this.Timer5 = setInterval(() => {
                    if (this.percentage5 < 100) {
                        this.percentage5 = this.percentage5 + 1;
                    } else {
                        this.percentage5 = 100;
                        if (flag5) {
                            this.content_text_list.push(this.end_time_hym + "完成了" + "脆弱性评估");
                            flag5 = 0;
                        }
                    }
                }, 40 * random5);

                this.Timer6 = setInterval(() => {
                    if (this.percentage6 < 100) {
                        this.percentage6 = this.percentage6 + 1;
                    } else {
                        this.percentage6 = 100;
                        if (flag6) {
                            this.content_text_list.push(this.end_time_hym + "完成了" + "风险评估");
                            flag6 = 0;
                        }
                    }
                }, 40 * random6);

            }
            if (newVal == 4) {
                clearInterval(this.Timer1);
                clearInterval(this.Timer2);
                clearInterval(this.Timer3);
                clearInterval(this.Timer4);
                clearInterval(this.Timer5);
                clearInterval(this.Timer6);
            }
        },
    },
    mounted() {
        this.getTopoList();
    },
    // 在beforeDestroy生命周期钩子中清除计时器
    beforeDestroy() {
        clearInterval(this.intervalId);
    }

};
</script>

<style scoped>
/*-------------------------------------------------------------*/
/* Dialog container */
.el-dialog {
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    background-color: #ffffff;
}

/* Dialog title */
.el-dialog__title {
    font-size: 1.5rem;
    font-weight: bold;
    color: #333;
    border-bottom: 1px solid #eaeaea;
    padding-bottom: 8px;
    margin-bottom: 16px;
}

/* Dialog content */
.dialog-content {
    padding: 16px;
    color: #555;
    font-size: 1rem;
    line-height: 1.5;
}

/* Table container */
.table-container {
    overflow-x: auto;
    align-items: center;
    margin-top: 16px;
    text-align: center;
}

/* Table styles */
.el-table {
    width: 100%;
    align-items: center;
    border-collapse: collapse;
    font-size: 0.9rem;
}


/* 使表格在容器中居中 */
.el-table {
    width: auto;
    /* 调整表格宽度以适应内容 */
    align-items: center;
    margin: 0 auto;
    /* 确保表格在容器中水平居中 */
}


.el-table th,
.el-table td {
    padding: 12px;
    text-align: center;
    border-bottom: 1px solid #eaeaea;
}

.el-table th {
    color: #666;
    font-weight: 500;
}

.el-table td {
    color: #333;
}

/* Dialog footer */
.dialog-footer {
    display: flex;
    justify-content: flex-end;
    padding: 16px;
    border-top: 1px solid #eaeaea;
}

/* Buttons */
.el-button {
    border-radius: 4px;
    padding: 8px 16px;
    font-size: 0.9rem;
    transition: background-color 0.3s;
}

.el-button.primary {
    background-color: #409EFF;
    color: #fff;
    border: none;
}

.el-button.primary:hover {
    background-color: #66b1ff;
}

.el-button.cancel {
    background-color: #e5e5e5;
    color: #333;
    border: none;
    margin-right: 8px;
}

.el-button.cancel:hover {
    background-color: #cccccc;
}

/*---------------------------------------------------*/
.content {
    width: 100%;
    height: 700px;
    padding-left: 25px;
}

.env_select {
    padding-top: 40px;
}

.btns {
    padding-top: 20px;
}

.slot_table {
    padding-top: 40px;
}

.slot_table_data {
    padding-top: 40px;
}

.btn {
    position: absolute;
    right: 10%;
    bottom: 20%;
}

.alert_warp {
    width: 100%;
    display: flex;
    flex-direction: row;
    padding-top: 40px;
}

.alert_content {
    height: 40px;
    width: 500px;
    border: solid;
    border-width: 1px;
    border-color: #41ae3c;
    background-color: #e2e7bf;
    margin: auto;
    text-align: center;
    line-height: 40px;
}

.selected {
    width: 500px;
    margin: auto;
    padding-top: 40px;
}

.use_llm {
    padding-left: 40px;
    padding-top: 10px;
    display: flex;
    flex-direction: row;
    height: 40px;
    line-height: 40px;
}

.Font_Size {
    color: darkred;
    font-size: large;
}

.select_input_device {
    padding-top: 20px;
    padding-left: 60px;
    display: flex;
    flex-direction: row;
}

.el-table .warning-row {
    background: rgb(255, 255, 255);
}

.el-table .success-row {
    background: #a3f477;
}

.part2 {
    padding-top: 40px;
}

.radio1 {
    padding-top: 10px;
    padding-left: 30px;
}

.radio2 {
    padding-top: 10px;
    padding-left: 30px;
}

.assessment_scope {
    padding-top: 10px;
    padding-left: 60px;
    display: flex;
    flex-direction: row;
}

.el-row {
    margin-bottom: 20px;

    &:last-child {
        margin-bottom: 0;
    }
}

.bg-purple {
    background: #d3dce6;
}

.grid-process {
    border-radius: 4px;
    min-height: 40px;
    line-height: 40px;
}

.grid-content {
    border-radius: 4px;
    min-height: 170px;
    line-height: 170px;
    display: flex;
    align-items: center;
}

.content_text {
    overflow-y: scroll;
    height: 350px;
    border: solid;
    border-color: gray;
    border-width: 2px;
}

.report_category {
    padding-top: 40px;
    width: 100%;
    text-align: center;
}

.watch_report {
    margin-left: 20px;
}

.export_report {
    margin-left: 20px;
}

.personal_guidance {
    width: 100%;
    text-align: center;
    padding-top: 40px;
}

.analysis_suggest {
    width: 100%;
    height: 450px;
    padding-top: 40px;
    display: flex;
    flex-direction: row;
}

.personal_guidance_btn {
    background-color: #69c0df;
}

.custom-collapse-item>>>.el-collapse-item__header {
    font-size: 20px;
}

.el-collapse-item__header {
    font-size: 20px;
}

.el-step__title {
    font-size: 30px !important;
}
</style>